<template>
<!-- 根组件 -->
    <div class="app-container">
        <!-- 顶部：在这里加一个固定header -->
        <mt-header fixed title="Vue-App">
            <span slot="left">
                <mt-button icon="back" @click="back" v-show="backflag">返回</mt-button>
            </span>
        </mt-header>

		<!-- 在根组件中放子组件 -->
        <transition>
			<router-view></router-view>
		</transition>


        <!-- 底部：在这里加一个固定bar-tab -->
        <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item1" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>

			<router-link  class="mui-tab-item1" to="/contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>

			<router-link  class="mui-tab-item1" to="/cart">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge" id="badgeball">0</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>

			<router-link  class="mui-tab-item1" to="/search">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>

    </div>
</template>

<script>
// 导入getters的映射函数
import {mapGetters} from 'vuex'

export default {
	data:function(){
		return {
			backflag:true,
		};
	},
	methods:{
		back:function(){
			this.$router.go(-1);
		}
	},
	created:function(){
		if(this.$route.path=='/home') this.backflag=false;
	},
	mounted:function(){
        // 根组件初始渲染的时候，把购物车商品数量给徽标
        document.getElementById('badgeball').innerHTML=this.total;
	},
	// 监听hash地址的变化，/home 页面去掉”返回“按钮
	// 同个页面刷新不会触发watch中监听的路由地址变化，
	// 所以当页面一刷新就在 /home 页面，按钮不会去掉，所以要在created里面先做一次判断
	watch:{
		'$route.path':function(newVal,oldVal){
			if(newVal=='/home') this.backflag=false;
			else this.backflag=true;
			console.log(this.backflag);
		}
	},
	computed:{
		// 把vuex中的总数量这个属性映射过来
		...mapGetters(['total'])
	}
    
}
</script>

<style lang='scss' scoped>
    .app-container{
        padding-top: 40px;
		padding-bottom: 50px;
		// 当有组件切换动效的时候，一瞬间，页面塞进两个组件，页面宽度变为两倍，此时需要隐藏超出页面的内容
		overflow: hidden;
    }
	
	// 动画效果
	.v-enter,
	.v-leave-to{
		opacity: 0;
		// 从右边进来
		transform: translateX(100%);
	}
	.v-leave-to{
		// 从左边消失
		transform: translateX(-100%);
	}
	.v-enter-active,
	.v-leave-active{
		transition: all .4s ease;
	}
	.v-leave-active{
		// 组件切换的时候让离开的组件不占位，
		// 占着位置的话进来的组件只能被挤到其位置，等离开的组件完全消失才会回到正常位置
        position: absolute;
	}

	// 增大头部z-index
	.mint-header{
		z-index: 99;
	}

	// 解决tabbar区域和图片分享栏js行为冲突，“mui-tab-item”类名冲突，就把样式券粘出来用自己的样式替换
	.mui-bar-tab .mui-tab-item1.mui-active {
		color: #007aff;
	}
	.mui-bar-tab .mui-tab-item1 {
		display: table-cell;
		overflow: hidden;
		width: 1%;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #929292;
	}
	.mui-bar-tab .mui-tab-item1 .mui-icon {
		top: 3px;
		width: 24px;
		height: 24px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
		font-size: 11px;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
</style>